<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
<style>
input[id="f"]{
    -webkit-appearance:none;
    width: 50px;
    height: 50px;
    background-color: red;
}
input[id="s"]{
    -webkit-appearance:none;
    width: 50px;
    height: 50px;
    background-color: rgb(44, 158, 211);
}
input[id="th"]{
    -webkit-appearance:none;
    width: 50px;
    height: 50px;
    background-color: yellow;
}
/* #s{
    background-color: rgb(44, 158, 211);
} */
input:checked{
    border-radius: 50%;
    border: solid;
}
input[id="f"]:checked ~div{
    background-color: red;
}
input[id="s"]:checked ~div{
    background-color: rgb(44, 158, 211);
}
input[id="th"]:checked ~div{
    background-color: yellow;
}
div{
    width: 500px;
    height: 500px;
    border: solid;
}
</style>
    
</head>
<body>
    
    <input type="radio" name="color" id="f">
    <input type="radio" name="color" id="s">
    <input type="radio" name="color" id="th">
    
    <div></div>


    <!-- <div class="box" id="ba"></div>
    123
    <div class="son">123</div> -->
    <!-- 
        - 属性选择器
        - id选择器
        - 类选择器
        - input
     -->

</body>
</html>
